<template>
	<el-dialog :visible.sync="dialogVisible" :title="'商品详情 - '+formData.title" width="900px" :close-on-click-modal="false" v-drag2anywhere>
		<el-form label-width="100px">
			<el-row>
			<el-col>
				<el-col :span="6">
					<el-form-item label="商品编码:">
						{{formData.sn}} <span><a :href="'https://item.jd.com/'+formData.sn+'.html'" target="_blank"  style="color: #0766ff; font-weight: bold;"><i class="el-icon-link"  title="打开参考链接" style="cursor: pointer;"></i></a></span>
					</el-form-item>
				</el-col>
			</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="上架名称:">
					<div>{{formData.title}} </div>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="原申请名称:">
						<div style="color:#a2a2a2">{{formData.pretitle}}</div>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>

				<el-col :span="6">
					<el-form-item label="目标平台:">{{formData.desplatform}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="上架渠道:">{{formData.platform}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="销售地区:">{{formData.allregion==1? '全国':formData.region}}</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="6">
					<el-form-item label="规格型号:">{{formData.model}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="品牌:">{{formData.brand}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="质保期:">{{formData.exptime}}</el-form-item>
				</el-col>

			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="尺寸(MM):">{{formData.size.x}}x{{formData.size.y}}x{{formData.size.z}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="重量(KG):">{{formData.weight}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="计量单位:">{{formData.unit}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="最小起订量:">{{formData.mmq}}</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col >
					<el-form-item label="详细参数:">{{formData.params}}</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="需求数量:">{{formData.count}}</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="上架价格:">{{formData.jdprice}}</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="参考链接:">{{formData.channelurl}} <a :href="formData.channelurl" v-if="formData.channelurl" target="_blank"  style="color: #0766ff; font-weight: bold;"><i class="el-icon-link"  title="打开参考链接" style="cursor: pointer;"></i></a></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="备注信息:">{{formData.memo}}</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="轮播图:">
						<viewer :images="formData.thumbs">
							<img v-for="src in formData.thumbs" :src="src.url" :key="src.name"
								fit="fill"
								style="width: 80px; height: 80px; padding:1px; background-color: #585858; margin: 2px;">
						</viewer>

					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="资质文件:">
						<div v-for="item in formData.zizhi" style="float: left;">
							<img v-viewer v-if="item.type=='image/jpeg'" :src="item.url"
								:key="item.name" fit="fill"
								style="width: 80px; height: 80px; padding:1px; background-color: #585858; margin: 2px;" />
							<img v-if="item.type=='application/pdf'"
								src="/static/images/icon_pdf.jpg"
								style="width: 80px; height: 80px; padding:1px; background-color: #585858; margin: 2px;"
								@click="handlePreviewPdf(item)" />
						</div>

					</el-form-item>
				</el-col>
			</el-row>


		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" size="medium" @click="dialogVisible=false">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					title:'',
					size:{
						x:0,
						y:0,
						z:0
					}
				},
				dialogVisible: false
			}
		},
		methods:{
			initData(data){
				this.formData=data;
			}
		}
	}
</script>

<style scoped>
	.el-form-item {
		margin: 0px;
	}
</style>
